<template>
  <div class="jx_top">
  <div class="jx-chat-input">
    <Button type="primary" icon="ios-add-circle" class="jx_button" @click="modal1 = true">我要留言</Button>
    <Modal
      v-model="modal1"
      title="留言"
      @on-ok="ok"
      @on-cancel="cancel">
      <Form :model="chatForm" :label-width="80">
        <FormItem label="用户名">
          <Input v-model="chatForm.name" placeholder="请输入你的名字"></Input>
        </FormItem>
        <FormItem label="留言内容">
          <Input v-model="chatForm.content" placeholder="请输入留言内容"></Input>
        </FormItem>
      </Form>
    </Modal>

  </div>

 

    <b-list-group>
      <b-list-group-item v-for="(item, key) in list" :key="key" href="#" action class="flex-column align-items-start jx_list_group">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1 jx_h5_title">{{item.name}}</h5>
          <small>{{item.createtime | dateFormat }}</small>
        </div>
        <p class="mb-1">
          {{item.content}}
        </p>
      </b-list-group-item>
    
    </b-list-group>
  
  </div>

</template>

<script>
import { getMessageData, insertMessageData } from '~/api/data' 
export default {
    data() {
      return {
        modal1: false,
        list: [],
        query: {
          pageNum: 1,
          pageSize: 999,
          query: '',
          display: 1,
        },
        chatForm:{
          name: '匿名用户',
          content: '',
          createtime: '',
          display: 0,
        }
      }
    },
  methods: {
    async asyncData() {
      return getMessageData(this.query).then(data => {
        this.list = data.data;
      })
    },
    async ok () {
      var UTCstring = (new Date()).toUTCString();
      this.chatForm.createtime = UTCstring;
      return insertMessageData(this.chatForm).then(data => {
        if(data == 'success'){
          this.$Message.success('发送成功，请等待管理员审核通过');
        }
        this.chatForm.content = ''
        this.asyncData();
      })

      },
    cancel () {
        this.$Message.info('取消留言');
    }
  },
  filters:{
    dateFormat(originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
  },

  mounted() {
    this.asyncData();
  }
  }
</script>

<style  lang="scss" scoped>


.jx-chat-input{
  display: flex;
  justify-content: center;
  align-content: center;
  line-height: 60px;
  animation: bounce; 
  animation-duration: 2s; 
  .jx_button {
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.jx_list_group{
  animation: bounceInLeft; 
  animation-duration: 2s; 
  .jx_h5_title{
    animation: shake; 
    animation-duration: 1s; 
  }
}


</style>